<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-我的收藏</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="collect-bar register-bar">
    <h2 class="header-box pos-abs-tl"><a class="go-back-btn sprite-icon" href="javascript:window.history.go(-1);"></a>我的收藏
    </h2>

    <div class="collect-cont">
        <!--没有收藏-->
        <div class="collect-none"><img src="img/collect-none.png"></div>
        <!--收藏数据列表-->
        <div id="wrapper">
            <div id="scroller">
                <div id="handleList" class="collect-list">
                    <ul>
                        <li class="collect-over">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-intro">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                    <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                </label>
                                <a href="#">
                                    <div class="collect-intro-text">
                                        <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                        <p class="collect-price">￥148.00元</p>
                                    </div>
                                </a>
                                <a class="collect-delete pos-abs-tr" href="javascript:;"></a>

                                <div class="collect-input-disk"></div>
                            </div>
                        </li>
                        <li>
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-intro">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                    <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                </label>
                                <a href="#">
                                    <div class="collect-intro-text">
                                        <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                        <p class="collect-price">￥148.00元</p>
                                    </div>
                                </a>
                                <a class="collect-delete pos-abs-tr" href="javascript:;"></a>

                                <div class="collect-input-disk"></div>
                            </div>
                        </li>
                        <li>
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-intro">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                    <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                </label>
                                <a href="#">
                                    <div class="collect-intro-text">
                                        <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                        <p class="collect-price">￥148.00元</p>
                                    </div>
                                </a>
                                <a class="collect-delete pos-abs-tr" href="javascript:;"></a>

                                <div class="collect-input-disk"></div>
                            </div>
                        </li>
                        <li>
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-intro">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                    <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                </label>
                                <a href="#">
                                    <div class="collect-intro-text">
                                        <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                        <p class="collect-price">￥148.00元</p>
                                    </div>
                                </a>
                                <a class="collect-delete pos-abs-tr" href="javascript:;"></a>

                                <div class="collect-input-disk"></div>
                            </div>
                        </li>
                        <li>
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-intro">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                    <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                </label>
                                <a href="#">
                                    <div class="collect-intro-text">
                                        <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                        <p class="collect-price">￥148.00元</p>
                                    </div>
                                </a>
                                <a class="collect-delete pos-abs-tr" href="javascript:;"></a>

                                <div class="collect-input-disk"></div>
                            </div>
                        </li>
                        <li>
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-intro">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                    <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                </label>
                                <a href="#">
                                    <div class="collect-intro-text">
                                        <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                        <p class="collect-price">￥148.00元</p>
                                    </div>
                                </a>
                                <a class="collect-delete pos-abs-tr" href="javascript:;"></a>

                                <div class="collect-input-disk"></div>
                            </div>
                        </li>
                        <li>
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-intro">
                                <label class="collect-img">
                                    <img src="img/collect-img.jpg">
                                    <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                </label>
                                <a href="#">
                                    <div class="collect-intro-text">
                                        <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                        <p class="collect-price">￥148.00元</p>
                                    </div>
                                </a>
                                <a class="collect-delete pos-abs-tr" href="javascript:;"></a>

                                <div class="collect-input-disk"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="collect-bottom pos-abs-bl">
        <div id="allCheckBar"
             style="width: 35px; height: 100%; position: absolute; top: 0; left: 0; z-index: 999;"></div>
        <div class="collect-handle" style="padding-left: 35px;">
            <label class="checkbox-bar" style="left: 10px;">
                <input id="allCheckBox" type="checkbox" value="">
                <span></span>
            </label>

            <div class="flex-btn">
                <a id="collectCancel" class="flex-btn-left" href="javascript:;"><span>取消收藏</span></a>
                <a id="joinShopCar" class="flex-btn-right active" href="javascript:;"><span>加入购物车</span></a>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        window._isAllCheck = false;
        var myScroll = publicFuns.newIScroll("#wrapper");

        var _collectType = true;    //收藏状态。false没有收藏物品，true有收藏列表

        collectFun(_collectType);
        function collectFun(type) {
            if (!type) {
                $(".collect-none").show();
                $(".collect-list").hide();
                $(".collect-bottom").hide();

                $(".collect-bar").addClass("noneCollect");
            } else {
                $(".collect-none").hide();
                $(".collect-list").show();
                $(".collect-bottom").show();

                $(".collect-bar").removeClass("noneCollect");
            }
        }

        //选择
        $(document).on("click", ".collect-input-disk", function () {
            var _tag = $("#handleList");
            var $this = $(this).parents("li").find("input[type='checkbox']");
            if ($this.parents(".checkbox-bar").hasClass("active")) {
                $this.prop("checked", true);
            } else {
                $this.prop("checked", false);
            }
            $this.parents(".checkbox-bar").toggleClass("active");
            if (_tag.find(".checkbox-bar.active").length == _tag.find("li").length) {
                $("#allCheckBox").prop("checked", true).parents(".checkbox-bar").addClass("active");
                window._isAllCheck = true;
            } else {
                $("#allCheckBox").prop("checked", false).parents(".checkbox-bar").removeClass("active");
                window._isAllCheck = false;
            }
        });

        //全选
        $("#allCheckBar").click(function () {
            var _tag = $("#handleList");
            publicFuns.allChecked("#allCheckBar", "#handleList", function () {
                _tag.find(".checkbox-bar").addClass("active");
                _tag.find("input[type='checkbox']").prop("checked", true);
            }, function () {
                _tag.find(".checkbox-bar").removeClass("active");
                _tag.find("input[type='checkbox']").prop("checked", false);
            });
        });

        //删除
        $(".collect-delete").click(function () {
            var $this = $(this);
            var _i = $("#handleList").find("li").length;
            $.jConfirm(["您确定要取消收藏吗？", "确定", "取消"], function () {
                $this.parents("li").animate({
                    "left": "-100%"
                }, 300, function () {
                    $(this).remove();
                    myScroll.refresh();
                    _i--;
                    $.jAlert("删除成功！", 140, 50, "j-alert-ani");
                    if (_i == 0) {
                        _collectType = false;
                        collectFun(_collectType);
                    }
                });
            }, "", "", "", "");
        });

        //批量取消
        $("#collectCancel").click(function () {
            var _d = $("#handleList");
            var _tag = _d.find(".checkbox-bar.active");
            var _i = _d.find("li").length;
            var _num = _tag.length;
            if (_num == 0) {
                $.jAlert("请选择要取消收藏的商品！", 200, 50, "j-alert-ani");
            } else {
                $.jConfirm(["您确定要取消收藏吗？", "确定", "取消"], function () {
                    $.jAlert("删除成功！", 140, 50, "j-alert-ani");
                    _i = _num - _i;
                    if (_i == 0) {
                        _collectType = false;
                        collectFun(_collectType);
                        return false;
                    }
                    _tag.parents("li").animate({
                        "left": "-100%"
                    }, 300, function () {
                        $(this).remove();
                        myScroll.refresh();
                    });
                }, "", "", "", "");
            }
        });

        //加入购物车
        $("#joinShopCar").click(function () {
            var _d = $("#handleList");
            var _tag = _d.find(".checkbox-bar.active");
            var _num = _tag.length;
            if (_num == 0) {
                $.jAlert("请选择要加入购物车的商品！", 200, 50, "j-alert-ani");
            } else {
                if (_tag.parents("li").hasClass("collect-over")) {
                    $.jAlert("已售罄的商品不能加入购物车！", 220, 50, "j-alert-ani");
                } else {
                    $.jAlert("加入购物车成功！", 140, 50, "j-alert-ani");
                }
            }
        });

    })
</script>
</body>
</html>